<%-- 
    Document   : content_product
    Created on : Nov 28, 2011, 12:18:52 AM
    Author     : Ngoc Linh
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib  prefix="ckeditor" uri="http://ckeditor.com" %>

    <c:if test="${not empty requestScope.sanpham}">
        <c:if test="${requestScope.message ne null}">
            <p class="message">
                ${requestScope.message}
            </p> 
            <script type="text/javascript">
                $(function(){
                    $('p.message').show().delay(3000).fadeOut('slow');
                })
            </script>
        </c:if>            
        <div id="box_detailproduct">                    
            <div id="detail_image" class="fl">
                <div id="detail_toolbar">
                    <c:if test="${sessionScope.taiKhoan eq null}">
                        <c:url value="login.do" var="linkAddFavor">
                            <c:param name="returnPage" value="product.do?masp=${param.masp}" />                            
                        </c:url>
                        <a href="${linkAddFavor}" id="favor"></a>
                    </c:if>
                    <c:if test="${sessionScope.taiKhoan ne null}">
                        <input type="hidden" value="${param.masp}" id="sp" />
                        <input type="hidden" value="${sessionScope.taiKhoan.maTaiKhoan}" id="tk" />
                        <c:if test="${requestScope.favor eq false}">
                            <a href="#" id="favor" class="favorite" onclick="addFavor()"></a>  
                        </c:if>
                        <c:if test="${requestScope.favor eq true}">
                            <a href="#" id="remove_favor" class="favorite" onclick="removeFavor()"></a>  
                        </c:if>
                    </c:if>
                    <div class="fr">
                        <a href="#" class="social_share"><img src="images/fb.png" width="25px" height="25px" alt="" title="Chia sẽ Facebook" /></a>
                        <a href="#" class="social_share"><img src="images/tw.png" width="25px" height="25px" alt="" title="Chia sẽ Twiter" /></a>
                        <a href="#" class="social_share"><img src="images/g+1.png" width="25px" height="25px" alt="" title="Chia sẽ Google plus" /></a>
                    </div>                    
                </div>
                <div id="detail_img">
                    <p class="img_container">
                        <img id="big_img" src="${requestScope.sanpham.hinhMoTa}" width="265px" height="265px" alt=""/>
                    </p>
                    <div id="list_img">
                        <ul style="margin:0px;padding:0px;">
                            <li><img src="${requestScope.sanpham.hinhMoTa}" class="img_product_multimedia" alt="" /></li>
                            <c:if test="${not empty requestScope.multimedia}">
                                <c:forEach items="${requestScope.multimedia}" var="multi">
                                    <li><img src="${multi.linkUrl}" class="img_product_multimedia" alt="" /></li>
                                </c:forEach>
                            </c:if>                                
                        </ul>                                
                    </div>
                </div>                        
            </div>
            <div id="detail_content" class="fl">
                <h2 id="detail_content_header">
                    ${requestScope.sanpham.tenSanPham}
                </h2>
                <div id="detail_main_content">
                    <div id="bid_info" class="fl">
                        <div class="bid_info_bg">
                            <p id="countdown"></p>
                            <p id="date_end_bid">
                                Kết thúc lúc <fmt:formatDate pattern="HH:mm:ss, dd/MM/yyyy" value="${requestScope.sanpham.ngayHetHan}"></fmt:formatDate>
                            </p>
                        </div>
                        <div class="bid_info_bg">
                            <form action="" method="post" onsubmit="return checkValueBid();">
                                <input type="hidden" value="${requestScope.sanpham.giaHienTai}" name="price_beat" id="price_beat" />
                                <p class="p_info_item">Giá hiện tại : <span id="price_current"><fmt:formatNumber pattern="###,###" value="${requestScope.sanpham.giaHienTai}"></fmt:formatNumber></span> VNĐ</p>
                                <p class="p_info_item">Giá của bạn : </p>                                                                               
                                <p class="your_bid">
                                    <input type="text" name="bid_mount" id="bid_mount" onkeyup="showTip();" /><span>.000 VNĐ</span> 
                                    <input type="submit" value="Đặt giá" class="btn_bid_common" name="bid" id="bid" />
                                </p>    
                                <p id="tip_mount"></p>
                                <p id="note_bid_mount">(Bạn phải đặt giá nhiều hơn <fmt:formatNumber pattern="###,###" value="${requestScope.sanpham.giaHienTai}"></fmt:formatNumber> VNĐ)</p>                                   
                            </form>                                    
                        </div>
                        <c:if test="${requestScope.sanpham.giaMuaNgay ne null}">
                            <div class="bid_info_bg">
                                <p class="p_info_item">Giá mua ngay : <span><fmt:formatNumber pattern="###,###" value="${requestScope.sanpham.giaMuaNgay}"></fmt:formatNumber></span> VNĐ</p>
                                <p id="buy_now"><input type="button" class="btn_bid_common" value="Mua ngay" id="buynow" onclick="document.location.href='buynow.do?masp=${param.masp}';" /></p>
                            </div>
                        </c:if>                        
                        <div class="bid_info_bg">
                            <p class="p_info_item">Giá khởi điểm : <span><fmt:formatNumber pattern="###,###" value="${requestScope.sanpham.giaKhoiDiem}"></fmt:formatNumber></span> VNĐ</span></p>
                        <p class="p_info_item">Số lượt đấu giá : <span id="num_bid">${requestScope.sanpham.soLuongdaugia}</span></p>
                        <p class="p_info_item">Số lượt xem : <span>${requestScope.sanpham.soLuongXem}</span></p>
                        <p class="p_info_item">Số người thích sản phẩm: <span id="num_favor">${requestScope.num_favor}</span></p>
                        </div>
                        <div class="bid_note">
                            Bạn được đấu giá thoải mái mà không cần quan tâm đến chi phí tham gia. Luôn luôn là miễn phí ! 
                        </div>
                    </div>
                    <div id="bid_history" class="fl">
                        <p class="history_bid_header">
                            Lịch sử đấu giá (<a href="#" title="Xem chi tiết lịch sử đấu giá của sản phẩm này !" style="color:brown;"><b id="num_historybid">${requestScope.tongluotDG}</b></a>)
                        </p>
                        <div id="bid_history_list">
                            <c:if test="${not empty requestScope.historyBid}">
                                <c:forEach items="${requestScope.historyBid}" var="hb">
                                    <div class="histoy_item">
                                        <div class="left_history fl">
                                            <p class="name_user_bid">${hb.userBid}</p>
                                            <p class="date_user_bid">${hb.timeBid}</p>
                                        </div>
                                        <div class="right_history fr">
                                            <p class="mount_user_bid">${hb.valueBid} đ</p>
                                            <p class="diff_user_bid">+ ${hb.valuePlus} đ</p>
                                        </div>
                                    </div> 
                                </c:forEach>
                            </c:if> 
                            <c:if test="${empty requestScope.historyBid}">
                                <p style="text-align: center;padding: 5px;"> Không có lần đặt giá nào ! </p>
                            </c:if>
                            <img src="images/closed.png" alt="Đấu gía đã kết thúc" id="bid_closed" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="line" style="margin-bottom:10px;"></div>
        <div id="total_info">
            <div id="product_related" class="fl">
                <h3>Có thể bạn quan tâm</h3>
                <div id="list_product_related">
                    <c:if test="${not empty requestScope.spLienQuan}">
                        <c:forEach items="${requestScope.spLienQuan}" var="splq">
                            <div class="product_item_related">
                                <a href="product.do?masp=${splq.maSanPham}" class="product_item_img fl">
                                    <img src="${splq.hinhMoTa}" alt="" height="80" width="68"/>
                                </a>
                                <div class="product_item_related_info fl">
                                    <a class="product_item_title" href="product.do?masp=${splq.maSanPham}">
                                         ${splq.tenSanPham}
                                    </a>
                                    <p class="product_item_price">
                                        <fmt:formatNumber value="${splq.giaHienTai}" pattern="###,###"></fmt:formatNumber> VNĐ
                                    </p>
                                    <p class="product_item_date_end">
                                        <fmt:formatDate value="${splq.ngayHetHan}" pattern="dd/MM/yyyy HH:mm"></fmt:formatDate>
                                    </p>
                                </div>
                            </div>
                        </c:forEach>
                    </c:if> 
                    <c:if test="${empty requestScope.spLienQuan}">
                        Không tìm thấy sản phẩm liên quan
                    </c:if>
                </div>                
            </div>
            <div id="tab_info" class="fr">
                <div id="list_tab">
                    <a href="#product_info">Thông tin sản phẩm</a>
                    <a href="#seller_info">Thông tin người bán</a>                    
                    <a href="#payment_shipping">Thanh toán & giao hàng</a>
                    <a href="#comment">Bình luận (<b>${requestScope.tongBinhLuan}</b>)</a>
                    <div class="clearboth"></div>
                </div>
                <div id="tab_container">
                    <div id="seller_info" class="tab_content">    
                        <c:set var="seller" value="${requestScope.sanpham.taikhoan}" />
                        <input type="hidden" id="seller" value="${requestScope.sanpham.taikhoan.maTaiKhoan}"/>
                        <div class="left_info fl">
                            <!--Tạo link xem shop-->
                            <c:if test="${requestScope.sanpham.taikhoan.tenTaiKhoan eq sessionScope.taiKhoan.tenTaiKhoan}" >
                                <c:url value="/member/myshop.do" var="link"></c:url>
                            </c:if>
                            <c:if test="${requestScope.sanpham.taikhoan.tenTaiKhoan ne sessionScope.taiKhoan.tenTaiKhoan}" >
                                <c:url value="/member/visitshop.do" var="link">
                                    <c:param name="account" value="${requestScope.sanpham.taikhoan.tenTaiKhoan}" />
                                </c:url>
                            </c:if>
                            <!--End-->
                            <c:if test="${seller.avatar ne null}">
                                <a href="${link}"><img src="${seller.avatar}" class="avatar" alt="" width="110" height="120"/></a> 
                            </c:if>
                            <c:if test="${seller.avatar eq null}">
                                <a href="${link}"><img src="images/data/avatar/noavatar.jpg" class="avatar" alt="" width="110" height="120"/></a> 
                            </c:if>
                            <p class="username">
                                <a href="${link}">${seller.tenTaiKhoan}</a>
                            </p>
                        </div>
                        <div class="right_info fl">
                            <table class="info_user fl">                                
                                <tr>
                                    <td class="label">
                                        Họ tên
                                    </td>
                                    <td class="value">
                                        <c:if test="${requestScope.thongtinTK ne null and requestScope.thongtinTK.hoTen ne null}">
                                            ${requestScope.thongtinTK.hoTen}
                                        </c:if>
                                        <c:if test="${requestScope.thongtinTK eq null or requestScope.thongtinTK.hoTen eq null}">
                                            ----
                                        </c:if>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td class="label">
                                        Giới tính
                                    </td>
                                    <td class="value">
                                        ${requestScope.thongtinTK.gioiTinh}
                                    </td>                                    
                                </tr>                                
                                <tr>
                                    <td class="label">
                                        Đến từ
                                    </td>
                                    <td class="value">
                                        <c:if test="${requestScope.thongtinTK ne null and requestScope.thongtinTK.noiSinh ne null}">
                                            ${requestScope.thongtinTK.noiSinh}
                                        </c:if>
                                        <c:if test="${requestScope.thongtinTK eq null or requestScope.thongtinTK.noiSinh eq null}">
                                            ----
                                        </c:if>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td class="label">
                                        Địa chỉ
                                    </td>
                                    <td class="value">
                                        <c:if test="${requestScope.thongtinTK ne null and requestScope.thongtinTK.diaChi ne null}">
                                            ${requestScope.thongtinTK.diaChi}
                                        </c:if>
                                        <c:if test="${requestScope.thongtinTK eq null or requestScope.thongtinTK.diaChi eq null}">
                                            ----
                                        </c:if>
                                    </td>                                    
                                </tr>                                
                                <tr>
                                    <td class="label">
                                        Điện thoại 
                                    </td>
                                    <td class="value">
                                        <c:if test="${requestScope.thongtinTK ne null and requestScope.thongtinTK.soDienThoai ne null}">
                                            ${requestScope.thongtinTK.soDienThoai}
                                        </c:if>
                                        <c:if test="${requestScope.thongtinTK eq null or requestScope.thongtinTK.soDienThoai eq null}">
                                            ----
                                        </c:if>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td class="label">
                                        Ngày tham gia
                                    </td>
                                    <td class="value">
                                        <fmt:formatDate value="${seller.ngayDangKi}" pattern="dd/MM/yyyy"></fmt:formatDate>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td class="label">
                                        Điểm tin cậy mua
                                    </td>
                                    <td class="value">
                                        ${seller.diemTinCayMua}
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td class="label">
                                        Điểm tin cậy bán
                                    </td>
                                    <td class="value">
                                        ${seller.diemTinCayBan}
                                    </td>                                    
                                </tr>
                            </table>
                            <div class="transaction_info fr">
                                <h3>Giao dịch gần nhất</h3>
                                <c:if test="${not empty requestScope.daugianguoiban}">
                                    <ul>
                                        <c:forEach items="${requestScope.daugianguoiban}" var="hbTK">
                                            <li>
                                                <a href="product.do?masp=${hbTK.sanpham.maSanPham}" title="Xem thông tin chi tiết">${hbTK.sanpham.tenSanPham}</a> <br />
                                                <p class="transaction_price"><fmt:formatNumber value="${hbTK.giaDau}" pattern="###,###"></fmt:formatNumber> VNĐ</p>
                                            </li> 
                                        </c:forEach>                                                                           
                                    </ul>                                    
                                </c:if>
                                <c:if test="${empty requestScope.daugianguoiban}">
                                    <p style="text-align: center;">Không có giao dịch gần đây !</p>
                                </c:if>
                            </div>
                        </div>
                    </div>
                    <div id="product_info" class="tab_content">                        
                        <p class="product_info_status">
                            <strong class="product_info_status_label">Tình trạng sản phẩm:</strong> ${requestScope.sanpham.tinhtrangsanpham.tenTinhTrangSanPham}
                        </p>  
                        <div class="product_info_detail">
                            <strong class="product_info_status_label">Mô tả sản phẩm</strong>
                            <div class="product_info_content_html">
                                <c:if test="${requestScope.sanpham ne null and requestScope.sanpham.moTaSanPham ne null}">
                                    ${requestScope.sanpham.moTaSanPham}
                                </c:if>
                                <c:if test="${requestScope.sanpham.moTaSanPham eq null}">
                                    Không tìm thấy thông tin chi tiết cho sản phẩm này !
                                </c:if>
                            </div>
                        </div>
                    </div>
                    <div id="payment_shipping" class="tab_content">
                        <c:if test="${requestScope.sanpham.thongTinThanhToan ne null}">
                            ${requestScope.sanpham.thongTinThanhToan}
                        </c:if>
                        <c:if test="${requestScope.sanpham.thongTinThanhToan eq null}">
                            Người đăng không cung cấp thông tin thanh toán và giao hàng
                        </c:if>
                    </div>
                    <div id="comment" class="tab_content">
                        <div id="listComment">
                            <c:if test="${not empty requestScope.dsBinhLuan}">
                                <c:forEach items="${requestScope.dsBinhLuan}" var="item">
                                    <div class="comment_item">
                                        <div class="avatar_user">
                                            <img src="${item.taikhoan.avatar}" alt="avatar" />
                                        </div>
                                        <div class="content_comment">
                                            <div class="maincontent_comment">
                                                ${item.noiDungComment}
                                            </div>
                                            <p class="date_comment">
                                                <b>${item.taikhoan.tenTaiKhoan}</b> viết lúc <fmt:formatDate value="${item.ngayComment}" pattern="HH:mm dd/MM/yyyy"/>
                                            </p>
                                        </div>
                                    </div>
                                </c:forEach>
                                <p class="paging_comment"> Trang 
                                    <c:forEach items="${requestScope.listTrang}" var="page">
                                        <c:url value="product.do" var="linkViewComment">
                                            <c:param name="masp" value="${param.masp}"/>
                                            <c:param name="pagecm" value="${page}"/>
                                        </c:url>
                                        <a href="${linkViewComment}" title="xem trang comment thứ ${page}">${page}</a>
                                        <c:if test="${page ne requestScope.tongSoTrang}">
                                            | 
                                        </c:if>
                                    </c:forEach>
                                </p>
                            </c:if> 
                            <c:if test="${sessionScope.taiKhoan ne null}">
                                <p class="btn_addcomment">
                                    <input type="image" id="link_addcomment" src="images/add_comment.png"/>
                                </p>
                            </c:if>                            
                        </div>
                        <c:if test="${sessionScope.taiKhoan ne null}">
                            <div id="addComment">
                                <form action="" method="post" name="frmAddComment" onsubmit="return getData();" accept-charset="UTF-8">
                                    <div id="comment_editor">
                                        <input type="hidden" name="masp" value="${param.masp}"/>
                                        <textarea rows="50" cols="10" id="binhLuan" name="binhLuan"></textarea>
                                        <p id="message_comment" style="color: red;"></p>
                                        <ckeditor:replace replace="binhLuan" basePath="ckeditor" config='<%=util.Configuration.createConfig("Basic", "#6B615E", 100)%>'/>
                                    </div>
                                    <p id="btn_comment_control">
                                        <input name="post_comment" type="submit" value="Đăng lời bình" class="btn_cm_common"/>
                                        <input name="clear_comment" type="button" value="Xóa hết" class="btn_cm_common" onclick="clearData();"/>
                                        <input name="cancle_comment" type="button" value="Hủy bỏ" class="btn_cm_common" onclick="canclePostComment();"/>
                                    </p>
                                </form>                    
                            </div>
                        </c:if>   
                        <c:if test="${sessionScope.taiKhoan eq null}">
                            <p class="noHiddenMessage" style="color:#1D1D1D;">Hãy <a href="login.do?returnPage=product.do?masp=${param.masp}" title="Đăng nhập">ĐĂNG NHẬP</a> để có thể gởi lời bình luận cho sản phẩm này !</P
                        </c:if>
                    </div>
                </div>
            </div>
        </div>        
        <script type="text/javascript">
            var dateTimeOut = new Date('<fmt:formatDate value="${requestScope.sanpham.ngayHetHan}" pattern="MM/dd/yyyy HH:mm:ss"></fmt:formatDate>');
            GetCountType2(dateTimeOut, "countdown");
            $(function (){
                getHistory(${requestScope.sanpham.giaHienTai}, ${param.masp});
            })
        </script>
    </c:if>
    <c:if test="${empty requestScope.sanpham}">
        <div id="container_empty">
            <p class="error_pro">
                Xin lỗi! Không thể tìm thấy thông tin sản phẩm bạn muốn tìm ! 
            </p>
            <p>
                Trở về trang chủ sau <span id="countdown_error">10</span> giây nữa !
            </p>
            <div id="adv_demo">
                <embed width="300" height="330" align="middle" quality="high" wmode="transparent" allowscriptaccess="always" flashvars="alink1=http%3A%2F%2Flogging.admicro.vn%2F_adc.html%3Fadm_domain%3Dhttp%253A%2F%2Fenbac.com%2F%26adm_campaign%3D1012685%26adm_aditem%3D86540%26adm_zoneid%3D32%26adm_channelid%3D-1%26adm_rehttp%3Dhttp%253A%2F%2Fwww.everpia.vn%2Feverpia_vn%2Fevent.php%253Fmid%253D67%257Cr%253Dview%257Cuid%253D1295%26adm_random%3D0.6980450147977749&amp;atar1=_blank" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" alt="" src="http://admicro2.vcmedia.vn/images/everpia_enbac01.swf" />
            </div>
            <script type="text/javascript"> 
                $(document).ready(function(){
                    countdownNum('countdown_error',6);
                })                
            </script>
        </div>
    </c:if>    
